import React from 'react';
import { observer, inject } from 'mobx-react';
import { getEcCom,getAntd,getLabel } from '../../util/convert';
import LayoutTr from '../layout/LayoutTr';
import * as Parse from '../../util/public/parseLayout';
import * as _ from '../../util/public/common';
import * as DetailUtil from '../../util/public/detailUtil';

@inject('globalStore', 'layoutStore')
@observer
export default class DTable extends React.Component{
    constructor(){
        super();
    }
    render(){
        const { globalStore,layoutStore,symbol,allowXScroll,lockedFlag,lockedBtnRow } = this.props;
        const groupid = parseInt(symbol.substring(7)) - 1;
        const { JSComplete,commonParam,browserVersion } = globalStore;
        const { layouttype,isprint } = commonParam;
        const { dataJson,detailMap,propFileCfg } = layoutStore;
        const detailLayout = dataJson.etables[symbol] || {};
        const headRow = parseInt(detailLayout.edtitleinrow || 0);
        const tailRow = parseInt(detailLayout.edtailinrow || 0);
        if(headRow == 0 || tailRow == 0 || tailRow <= headRow) {
            return <div>{getLabel(386148,'对不起，表头标识、表尾标识设置异常，无法渲染明细！')}</div>
        }
        const detailObj = detailMap.get(symbol);
        const detailAttr = detailObj.attr;
        const printDetailEveryPageHead = isprint == "1" && detailAttr.isprintthead === 1;
        const isSeniorSet = detailLayout.seniorset === "1";
        const lockedColumn = parseInt(detailLayout.edlockedcol || -1);
        const { rowattrs,colattrs,rowheads,ec } = detailLayout;
        let colheads = {...detailLayout.colheads};
        if(lockedFlag === 1){   //冻结区域，只解析部分列
            _.forIn(colheads, (v,k)=>{
                if(parseInt(k.substring(4)) > lockedColumn)
                    delete colheads[k];
            });
        }
        const divStyle = allowXScroll && lockedFlag !== 1  ? {"overflow-x": browserVersion === "IE9" ? "scroll" : "auto"} : {};
        //锁定列情况，隐藏列情况，明细fix住，解决浏览按钮自撑宽度异常
        let tableStyle = Parse.judgeDetailContainColHide(colattrs) ? {"table-layout":"fixed"} : {};
        const rowHeads = Parse.convertRowHeads(rowheads);
        const colHeads = Parse.convertColHeads(colheads, symbol, layouttype, tableStyle, allowXScroll, isSeniorSet);
        const ecMap = Parse.convertEcMap(ec);
        //解析列宽
        let colTdArr = new Array();
        if(!isSeniorSet)
            colTdArr.push(<td style={{width:allowXScroll ? "60px" : "6%"}} />);
        colHeads.map((o)=>{
            let colStyle = {width:o.width};
            const colCusAttr = colattrs && colattrs[`col_${o.id}`] || {};
            let colClassName = "";
            if(colCusAttr.hide === "y")
                colClassName += " detail_hide_col";
            if(!!colCusAttr.class)
                colClassName += " "+colCusAttr.class;
            colTdArr.push(<td style={colStyle} className={colClassName} />);
        });
        //解析数据行
        let trHeadArr = new Array();   //头部行
        trHeadArr.push(<tr className="detailControlWidth">{colTdArr}</tr>);
        Parse.parseLayoutImage(detailLayout, tableStyle, trHeadArr);    //解析背景图、悬浮图,置于头部行
        let trDataArr = new Array();   //数据行
        let trTailArr = new Array();   //尾部行
        const { currentPageRowArr,rowInfo,currentPageRowMergeInfo } = detailObj;
        rowHeads.map(row=>{
            const rowid = parseInt(row.id);
            const rowCusAttr = rowattrs ? rowattrs["row_"+rowid] : null;
            let addColType = 0;
            const dataRows = tailRow - headRow - 1;
            if(rowid === headRow+1) {    //明细数据行
                if(!isSeniorSet)
                    addColType = 3;
                currentPageRowArr.length>0 && currentPageRowArr.map((_info,index) =>{
                    const { rowIndex,serialNum } = _info;
                    const rowAttr = rowInfo.get(`row_${rowIndex}`);
                    const isLastRow = index === currentPageRowArr.length-1;
                    const detailProps = {rowType:2, addColType, rowIndex, serialNum, lockedFlag, lockedColumn, needHide:rowAttr.get("needHide"), isLastRow}
                    for(let i=rowid; i<tailRow; i++) {  //高级模式可多行
                        trDataArr.push(<LayoutTr ecId={`${this && this.props && this.props.ecId || ''}_LayoutTr@k1jxa4@${symbol}_${i}`}
                            symbol={symbol}
                            colNum={colHeads.length}
                            rowid={i}
                            rowHeight={`${rowheads[`row_${i}`]||30}px`}
                            rowCusAttr={rowCusAttr}
                            colattrs={colattrs}
                            ecMap={ecMap}
                            detailProps={detailProps}
                            dataRows={dataRows}
                            rowMergeInfo={currentPageRowMergeInfo && currentPageRowMergeInfo.get(`row_${rowIndex}`)}
                        />);
                    }
                });
            }else if(rowid < headRow || (isSeniorSet && rowid > tailRow)){  //头尾非数据行
                if(lockedBtnRow && rowid === 0)
                    return true;
                if(!isSeniorSet)
                    addColType = (rowid === headRow-1) ? 2 : 1;
                const detailProps = {rowType: rowid<headRow?1:3, addColType, lockedFlag, lockedColumn, lockedBtnRow};
                const detailTr = (
                    <LayoutTr ecId={`${this && this.props && this.props.ecId || ''}_LayoutTr@df6bc7@${symbol}_${rowid}`}
                        symbol={symbol}
                        colNum={colHeads.length}
                        rowid={rowid}
                        rowHeight={`${rowheads[`row_${rowid}`]||30}px`}
                        rowCusAttr={rowCusAttr}
                        colattrs={colattrs}
                        ecMap={ecMap}
                        detailProps={detailProps}
                    />
                );
                if(rowid < headRow)
                    trHeadArr.push(detailTr);
                else
                    trTailArr.push(detailTr);
            }
        });
        if(!isSeniorSet && DetailUtil.judgeDetailContainSum(symbol)){     //扩充添加合计行
            trTailArr.push(<LayoutTr ecId={`${this && this.props && this.props.ecId || ''}_LayoutTr@pdoiz3@${symbol}_sumRow`}
                symbol={symbol}
                colNum={colHeads.length}
                rowid={headRow-1}   //合计行样式取字段标签所在行
                rowHeight="30px"
                colattrs={colattrs}
                ecMap={ecMap}
                detailProps={{addColType:4}}
            />);
        }
        
        const diffClass= lockedFlag === 1 ? "_locked" : "";
        return (
            <div className={`excelDetailTableArea${diffClass}`}>
                {
                    isprint != "1" && 
                    <div className={`excelDetailFixedHead${diffClass}`}>
                        <table className="excelDetailTable" id={`oTable${groupid}_head${diffClass}`} style={tableStyle}>
                            <tbody>
                                {trHeadArr}
                            </tbody>
                        </table>
                    </div>
                }
                <div className={`excelDetailContent${diffClass}`} style={divStyle} onScroll={this.doScrollXEvent}>
                    <table className="excelDetailTable" id={`oTable${groupid}${diffClass}`} name={`oTable${groupid}${diffClass}`} style={tableStyle}>
                        {
                            printDetailEveryPageHead && <thead>{trHeadArr}</thead>
                        }
                        <tbody>
                            {printDetailEveryPageHead ? [] : trHeadArr}
                            {trDataArr}
                            {trTailArr}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
    doScrollXEvent = (vthis) => {
        const { symbol } = this.props;
        const groupid = parseInt(symbol.substring(7)) - 1;
        const detailObj = jQuery("#dTableArea_"+groupid);
        if(detailObj.find(".excelDetailContent").scrollLeft() > 0)
            detailObj.find(".excelDetailTableArea_locked").addClass("wf-detail-scrollx-fixed");
        else
            detailObj.find(".excelDetailTableArea_locked").removeClass("wf-detail-scrollx-fixed");    
        DetailUtil.syncDetailScrollXPosition(groupid);
    }
}
